import React, { useRef, useState } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const longText = '这是一段较长的文本，用于演示 autoSize 的增高与 rows 初始高度行为。重复：这是一段较长的文本。这是一段较长的文本。这是一段较长的文本。';

const TextAreaTestScreen: React.FC = () => {
  const colors = useThemeColors();
  const styles = StyleSheet.create({
    section: { marginBottom: 20 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'column', gap: 12 },
    bordered: { borderWidth: 1, borderColor: colors.border, padding: 8, borderRadius: 8 },
  });

  // 受控输入演示
  const [value, setValue] = useState<string>('初始受控内容');
  const [focusCount, setFocusCount] = useState(0);
  const [blurCount, setBlurCount] = useState(0);
  const [rightPressCount, setRightPressCount] = useState(0);
  const inputRef = useRef<TextInput>(null);

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'TextArea 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="TextAreaTestScreen"
    >
      {/* 非受控与占位、行数 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <View style={styles.row}>
            <UI.TextArea
              placeholder="请输入内容（非受控 defaultValue）"
              defaultValue="默认内容"
              rows={3}
              variant="solid"
              testID="textarea-basic-default-solid"
            />
            <UI.TextArea
              placeholder="Outline 变体，rows=4"
              rows={4}
              variant="outline"
              color="primary"
              testID="textarea-basic-outline-rows4"
            />
            <UI.TextArea
              placeholder="Ghost 变体（透明背景）"
              variant="ghost"
              rows={2}
              testID="textarea-basic-ghost-rows2"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 受控与事件：onChangeText/onFocus/onBlur/allowClear */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>受控与事件</UI.Text>
          <View style={styles.row}>
            <UI.TextArea
              value={value}
              onChangeText={setValue}
              placeholder="受控输入，支持 allowClear"
              allowClear
              rows={3}
              onFocus={() => setFocusCount((c) => c + 1)}
              onBlur={() => setBlurCount((c) => c + 1)}
              rightIcon={{
                name: 'create',
                color: colors.primary,
                size: 18,
                onPress: () => setRightPressCount((c) => c + 1),
              }}
              leftIcon={{ name: 'chatbubble-ellipses', color: colors.secondary, size: 18 }}
              testID="textarea-controlled-allowclear-icons"
            />
            <UI.Text variant="caption" color="textSecondary">
              焦点次数：{focusCount}，失焦次数：{blurCount}，右侧图标点击：{rightPressCount}
            </UI.Text>
            <UI.Button title="Focus 输入框" size="small" onPress={() => inputRef.current?.focus()} />
            <UI.TextArea
              ref={inputRef}
              placeholder="可通过 ref 聚焦"
              rows={2}
              testID="textarea-ref-focus"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸与颜色：size 与 color */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸与颜色</UI.Text>
          <View style={styles.row}>
            <UI.TextArea placeholder="xs" size="xs" testID="textarea-size-xs" />
            <UI.TextArea placeholder="sm" size="sm" testID="textarea-size-sm" />
            <UI.TextArea placeholder="md" size="md" testID="textarea-size-md" />
            <UI.TextArea placeholder="lg" size="lg" testID="textarea-size-lg" />
            <UI.TextArea placeholder="xl" size="xl" testID="textarea-size-xl" />
            <UI.TextArea placeholder="主色" color="primary" testID="textarea-color-primary" />
            <UI.TextArea placeholder="警告色" color="warning" testID="textarea-color-warning" />
            <UI.TextArea placeholder="自定义色 #1976D2" color="#1976D2" testID="textarea-color-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 自动增高与 rows 初始高度 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>AutoSize 与行数</UI.Text>
          <View style={styles.row}>
            <UI.TextArea
              value={longText}
              onChangeText={() => {}}
              rows={3}
              autoSize
              placeholder="autoSize=true，随内容增高"
              testID="textarea-autosize-rows3"
            />
            <UI.TextArea
              placeholder="固定高度 rows=4（autoSize=false）"
              rows={4}
              autoSize={false}
              testID="textarea-fixed-rows4"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 禁用、只读、错误态与辅助文案 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>状态与辅助</UI.Text>
          <View style={styles.row}>
            <UI.TextArea placeholder="禁用态" disabled testID="textarea-disabled" />
            <UI.TextArea placeholder="只读（不可编辑）" editable={false} testID="textarea-readonly" />
            <UI.TextArea
              placeholder="错误态 + helperText"
              error
              helperText="这是错误说明"
              testID="textarea-error-helper"
            />
            <UI.TextArea
              placeholder="安全输入（secureTextEntry）"
              secureTextEntry
              testID="textarea-secure"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 样式与间距：style/inputStyle/SpacingProps/BoxProps/fullWidth/flex */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>样式与布局</UI.Text>
          <View style={[styles.row, styles.bordered]}>
            <UI.TextArea
              placeholder="自定义 inputStyle（字体/行高/颜色）"
              inputStyle={{ fontSize: 16, lineHeight: 24, color: '#1E88E5' }}
              testID="textarea-inputstyle-custom"
            />
            <UI.TextArea
              placeholder="Spacing：m=8"
              m={8}
              testID="textarea-spacing-m-8"
            />
            <UI.TextArea
              placeholder="Spacing：p=8"
              p={8}
              backgroundColor={colors.surface}
              testID="textarea-spacing-p-8"
            />
            <UI.TextArea
              placeholder="BoxProps：边框/圆角/背景"
              backgroundColor="#E3F2FD"
              borderWidth={1}
              borderColor={colors.border}
              borderRadius={12}
              testID="textarea-boxprops-border-radius"
            />
            <UI.TextArea
              placeholder="fullWidth=true"
              fullWidth
              testID="textarea-fullwidth"
            />
            <View style={{ flexDirection: 'row', gap: 12 }}>
              <UI.TextArea placeholder="flex=1 左" flex={1} testID="textarea-flex-1-left" />
              <UI.TextArea placeholder="flex=1 右" flex={1} testID="textarea-flex-1-right" />
            </View>
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default TextAreaTestScreen;